<template>
  <div class="wrapper-header">
    <a-icon
      class="trigger"
      :type="collapsed ? 'menu-unfold' : 'menu-fold'"
      @click="toggleCollapsed"
    />
    <h1>Header</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false
    };
  },
  methods: {
      toggleCollapsed() {
          console.log('Emmit toggleSidebarCollapsed!', this.collapsed);
          this.collapsed = !this.collapsed;
          this.$emit('toggleSidebar', this.collapsed);
      }
  }
};
</script>

<style scoped>
.wrapper-header {
  display: flex;
}
</style>